/**
 *
 * by littlefean
 */
window.onload = function () {
    let out1 = document.querySelector(`.out1`);
    let out2 = document.querySelector(`.out2`);
    let out3 = document.querySelector(`.out3`);
    document.querySelector(`.renew`).addEventListener("click", () => {
        window.location.reload();
    });
    let inputMatrix = document.querySelector(`.inputMatrix`);
    let maxN = 5;

    let size = {
        width: 0,
        height: 0,
    }

    /**
     * 获取用户输入的矩阵
     * @return {[]} 二维数组表示矩阵
     */
    function getMInput1() {
        let oriM = [];
        for (let y = 0; y < size.height; y++) {
            let line = [];
            for (let x = 0; x < size.width; x++) {
                line.push(+out1.children[y].children[x].value);
            }
            oriM.push(line);
        }
        return oriM;
    }

    function getMInput2() {
        let oriM = [];
        for (let y = 0; y < size.width; y++) {
            let line = [];
            for (let x = 0; x < size.height; x++) {
                line.push(+out2.children[y].children[x].value);
            }
            oriM.push(line);
        }
        return oriM;
    }

    // 生成答案
    function genOut3(arr2d) {
        out3.innerHTML = "";
        let L = arr2d.length;
        for (let y = 0; y < L; y++) {

            let line = div("", "line");

            for (let x = 0; x < L; x++) {
                let box = div("", "box")
                box.innerHTML = arr2d[y][x]
                line.appendChild(box);
            }
            out3.appendChild(line);
        }
    }

    for (let y = 0; y < maxN; y++) {
        let lineEle = div("", "line");

        for (let x = 0; x < maxN; x++) {
            let box = div(`${y + 1}x${x + 1}`, "box");

            box.addEventListener("click", () => {
                size.width = x + 1;
                size.height = y + 1;
                // 清除大小选择
                inputMatrix.innerHTML = "";
                document.querySelector(`.note`).innerHTML = "现在开始输入你的矩阵里的每一个数字吧";
                // 生成第一个矩阵
                for (let y = 0; y < size.height; y++) {
                    let line = div("", "line");

                    for (let x = 0; x < size.width; x++) {
                        let box = document.createElement("input");
                        box.type = "Number";
                        box.classList.add("box");
                        box.placeholder = "0";
                        box.onblur = function () {
                            let m1 = getMInput1();
                            let m2 = getMInput2();
                            let m3 = matrixMul(m1, m2);
                            genOut3(m3);
                        }
                        line.appendChild(box);
                    }
                    out1.appendChild(line);
                }
                // 生成第二个矩阵
                for (let y = 0; y < size.width; y++) {
                    let line = div("", "line");

                    for (let x = 0; x < size.height; x++) {
                        let box = document.createElement("input");
                        box.classList.add("box");
                        box.placeholder = "0";
                        box.type = "Number";
                        box.onblur = function () {
                            let m1 = getMInput1();
                            let m2 = getMInput2();
                            let m3 = matrixMul(m1, m2);
                            genOut3(m3);
                        }
                        line.appendChild(box);
                    }
                    out2.appendChild(line);
                }
                // 生成第三个矩阵
                genOut3(zeros(size.height));
            });
            lineEle.appendChild(box);
        }
        inputMatrix.appendChild(lineEle);
    }
}
